<!--
 * @Author: your name
 * @Date: 2020-12-18 10:19:13
 * @LastEditTime: 2020-12-23 18:18:42
 * @LastEditors: Please set LastEditors
 * @Description: 新增报表页面
 * @FilePath: \gitee-WeBi\pages\add_reportForm\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- css begin -->
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../css/animation/animation.css">
    <link rel="stylesheet" href="../../css/main/main.css">
    <link rel="stylesheet" href="../../css/zz/add_reportForm/index.css">
    <!-- css end -->
    <title>Document</title>
</head>

<body>


    <div id="zz-main_iframe" class="has-titleBar">
        <div class="zz-titleBar page-top zz-df-jc-sb zz-df-ai-c">
            <div class="title">新增报表</div>
            <div>
                <el-button @click="backToConfigReportForm">取&nbsp;消</el-button>
                <el-button type="primary">确&nbsp;定</el-button>
            </div>
        </div>
        

        <div class="zz-iframe-fluid add-reportForm">


            <div class="zz-iframe-fluid_content">
                <!--  -->
                <div class="zz-df add-reportForm-content">
                    <!-- 左侧 -->
                    <div class="add-reportForm-content_left">
                        <!-- 报表基本信息 -->
                        <div class="area top">
                            <el-form>
                                <el-row>
                                    <el-col>
                                        <el-form-item label="报表名称：">
                                            <el-input 
                                                placeholder="未命名报表"
                                                type="textarea"
                                                :rows="2"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col>
                                        <el-form-item label="报表分类：">
                                            <el-select 
                                                placeholder="请选择报表分类"></el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col>
                                        <el-form-item label="查看权限：">
                                            <el-select 
                                                placeholder="请选择查看权限"></el-select>
                                                <!-- <el-cascader
                                                expandTrigger="hover"
                                                v-model="storeDialogArgs.serviceTypeSelect"
                                                :options="kqmblx"
                                                :props="propsServiceType"
                                                :show-all-levels="true"
                                                filterable
                                                clearable
                                                @change="getStoreServiceType"
                                              ></el-cascader> -->
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col>
                                        <el-form-item class="zz-mb_0_i" label="数据来源：">
                                            <el-select 
                                                placeholder="请选择数据来源"></el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                        <!-- 报表类型  + 报表设置 -->
                        <div class="area bottom">
                            <div class="zz-titleBar has-el-tab">
                                <!--  -->
                                <div class="title">报表形式</div>
                                <!--  -->
                                <el-tabs v-model="reportType">
                                    <el-tab-pane name="0">
                                        <span slot="label" v-text="'表格'"></span>
                                    </el-tab-pane>
                                    <el-tab-pane name="1">
                                        <span slot="label" v-text="'折线图'"></span>
                                    </el-tab-pane>
                                    <el-tab-pane name="2">
                                        <span slot="label" v-text="'柱状图'"></span>
                                    </el-tab-pane>
                                    <el-tab-pane name="3">
                                        <span slot="label" v-text="'饼状图'"></span>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                            <!-- 表格报表 -->
                            <div 
                                v-show="reportType=='0'"
                                class="table-rf">
                                <el-table
                                    :data="ARF_table_data">
                                    <el-table-column 
                                        label="列数"
                                        width="58px"
                                        type="index"
                                        :index="indexMethod"
                                        show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column
                                        class-name="zz-ta-l" 
                                        label="字段">
                                        <el-select placeholder="请选择字段"></el-select>
                                    </el-table-column>
                                    <el-table-column 
                                        label="操作"
                                        width="98px"
                                        >
                                        <template v-slot:default=" { row } = slot">
                                            <span class="zz-btn_txt el-icon-minus"></span>
                                            <span class="zz-btn_txt el-icon-top"></span>
                                            <span class="zz-btn_txt el-icon-bottom"></span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="zz-df zz-df-jc-c zz-mt20">
                                    <el-button type="primary" icon="el-icon-plus">增加列数</el-button>
                                </div>
                            </div>
                            <!-- 折线图报表 -->
                            <div 
                                v-show="reportType=='1'"
                                class="zxt-rf">
                                    <!-- X轴时间类型 -->
                                    <div class="title">
                                        <span class="wenhao ">
                                            <span>X轴时间类型</span>
                                            <span class="icon el-icon-question"></span>
                                        </span>
                                    </div>
                                    <div class="content zz-df zz-df-jc-sb">
                                        <el-radio-group v-model="zxt_x_tt">
                                            <el-radio :label="3">
                                                <span class="wenhao ">
                                                    <span>当段时间</span>
                                                    <span class="icon el-icon-question"></span>
                                                </span>
                                            </el-radio>
                                            <el-radio :label="6">
                                                <span class="wenhao ">
                                                    <span>范围时间</span>
                                                    <span class="icon el-icon-question"></span>
                                                </span>
                                            </el-radio>
                                            <el-radio :label="9">
                                                <span class="wenhao ">
                                                    <span>最新时间</span>
                                                    <span class="icon el-icon-question"></span>
                                                </span>
                                            </el-radio>
                                        </el-radio-group>
                                    </div>
                                    <!-- X轴坐标维度 -->
                                    <div class="title">X轴坐标维度</div>
                                    <div class="content zz-df zz-df-jc-sb">
                                        <el-radio-group v-model="zxt_x_wt">
                                            <el-radio :label="3">日</el-radio>
                                            <el-radio :label="6">月</el-radio>
                                            <el-radio :label="9">年</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <!-- X轴坐标时间字段 -->
                                    <div class="title">X轴坐标时间字段</div>
                                    <div class="content">
                                        <el-select placeholder="请选择数据来源"></el-select>
                                    </div>
                                    <!-- X轴坐标数量 -->
                                    <div class="title xzzbsl">
                                        <span>X轴坐标数量</span>
                                        <el-input-number
                                            v-model="zxt_x_zbsl"  
                                            :min="1" 
                                            :max="10" 
                                            label="描述文字"></el-input-number>
                                    </div>
                                    <!-- 折线图属性 -->
                                    <div class="zxt-unit el-form">
                                        <div class="title">折线图属性</div>
                                        <div class="el-form-item content">
                                            <label class="el-form-item__label">Y轴指标：</label>
                                            <div class="el-form-item__content">
                                                <el-select placeholder="点击选择字段">
                                                    <el-option></el-option>
                                                </el-select>
                                            </div>
                                        </div>
                                        <div class="el-form-item content">
                                            <label class="el-form-item__label">统计形式：</label>
                                            <div class="el-form-item__content">
                                                <el-select placeholder="求和">
                                                    <el-option></el-option>
                                                </el-select>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 折线图 -->
                                    <div class="zxt-unit el-form">
                                        <div class="title">折线图</div>
                                        <div class="el-form-item content">
                                            <label class="el-form-item__label">统计对象：</label>
                                            <div class="el-form-item__content">
                                                <el-select placeholder="选择对象字段">
                                                    <el-option></el-option>
                                                </el-select>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 多个折线 -->
                                    <div class="zxt-unit el-form txdxz">
                                        <div class="sub-title">折线图1</div>
                                        <div class="el-form-item content">
                                            <label class="el-form-item__label">对象值：</label>
                                            <div class="el-form-item__content zz-df">
                                                <el-input placeholder="填写对象值">
                                                </el-input>
                                                <!--  -->
                                                <span class="zz-btn_txt grey">
                                                    <span class="el-icon-delete"></span>
                                                    <span>删除对象值</span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                <div class="zz-df zz-df-jc-c zz-mt20">
                                    <el-button type="primary" icon="el-icon-plus">新增折线图</el-button>
                                </div>
                            </div>
                            <!-- 柱状图报表 -->
                            <div 
                            v-show="reportType=='2'"
                            class="zzt-rf">
                                <!-- X轴坐标字段类型 -->
                                <div class="title">
                                    <span class="wenhao ">
                                        <span>X轴坐标字段类型</span>
                                        <span class="icon el-icon-question"></span>
                                    </span>
                                </div>
                                <div class="content zz-df zz-df-jc-sb">
                                    <el-radio-group v-model="zxt_x_tt">
                                        <el-radio :label="3">
                                            <span class="wenhao ">
                                                <span>文本</span>
                                                <span class="icon el-icon-question"></span>
                                            </span>
                                        </el-radio>
                                        <el-radio :label="6">
                                            <span class="wenhao ">
                                                <span>确定数值</span>
                                                <span class="icon el-icon-question"></span>
                                            </span>
                                        </el-radio>
                                        <el-radio :label="9">
                                            <span class="wenhao ">
                                                <span>范围数值</span>
                                                <span class="icon el-icon-question"></span>
                                            </span>
                                        </el-radio>
                                    </el-radio-group>
                                </div>
                                <!--  -->
                                <div class="zzt-unit el-form">
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">X轴坐标：</label>
                                        <div class="el-form-item__content">
                                            <el-select placeholder="点击选择字段">
                                                <el-option></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <!-- 多个坐标范围 -->
                                <div class="zzt-unit el-form zbfw">
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">坐标1范围：</label>
                                        <div class="el-form-item__content">
                                            <el-input></el-input>
                                            <span class="sep">至</span>
                                            <el-input></el-input>
                                            <!--  -->
                                            <span class="zz-btn_txt grey">
                                                <span class="el-icon-delete"></span>
                                                <span>删除坐标范围</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="zz-df zz-df-jc-c zz-mt20">
                                    <el-button type="primary" icon="el-icon-plus">新增坐标范围</el-button>
                                </div>
                                <!-- 柱形图属性 -->
                                <div class="zzt-unit el-form">
                                    <div class="title">柱形图属性</div>
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">Y轴指标：</label>
                                        <div class="el-form-item__content">
                                            <el-select placeholder="点击选择字段">
                                                <el-option></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">统计形式：</label>
                                        <div class="el-form-item__content">
                                            <el-select placeholder="求和">
                                                <el-option></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <!--  -->
                                <div class="zzt-unit el-form">
                                    <div class="title">柱形图</div>
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">统计对象：</label>
                                        <div class="el-form-item__content">
                                            <el-select placeholder="选择对象字段">
                                                <el-option></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <!-- 多个柱形图 -->
                                <div class="zxt-unit el-form txdxz">
                                    <div class="sub-title">柱形图1</div>
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">对象值：</label>
                                        <div class="el-form-item__content zz-df">
                                            <el-input placeholder="填写对象值">
                                            </el-input>
                                            <!--  -->
                                            <span class="zz-btn_txt grey">
                                                <span class="el-icon-delete"></span>
                                                <span>删除对象值</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <!--  -->
                                <div class="zz-df zz-df-jc-c zz-mt20">
                                    <el-button type="primary" icon="el-icon-plus">新增柱形图</el-button>
                                </div>

                            </div>
                            <!-- 饼状图报表 -->
                            <div 
                            v-show="reportType=='3'"
                            class="bzt-rf">
                                <!-- 维度字段类型 -->
                                <div class="title">
                                    <span class="wenhao ">
                                        <span>维度字段类型</span>
                                        <span class="icon el-icon-question"></span>
                                    </span>
                                </div>
                                <div class="content zz-df zz-df-jc-sb">
                                    <el-radio-group v-model="zxt_x_tt">
                                        <el-radio :label="3">
                                            <span class="wenhao ">
                                                <span>文本</span>
                                                <span class="icon el-icon-question"></span>
                                            </span>
                                        </el-radio>
                                        <el-radio :label="6">
                                            <span class="wenhao ">
                                                <span>确定数值</span>
                                                <span class="icon el-icon-question"></span>
                                            </span>
                                        </el-radio>
                                        <el-radio :label="9">
                                            <span class="wenhao ">
                                                <span>范围数值</span>
                                                <span class="icon el-icon-question"></span>
                                            </span>
                                        </el-radio>
                                    </el-radio-group>
                                </div>
                                <!--  -->
                                <div class="bzt-unit el-form">
                                    <div class="title">饼状图属性</div>
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">统计指标：</label>
                                        <div class="el-form-item__content">
                                            <el-select placeholder="点击选择字段">
                                                <el-option></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">统计形式：</label>
                                        <div class="el-form-item__content">
                                            <el-select placeholder="求和">
                                                <el-option></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <!-- 多个饼状图 -->
                                <div class="zzt-unit el-form zbfw">
                                    <div class="sub-title">饼状图1</div>
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">统计对象：</label>
                                        <div class="el-form-item__content">
                                            <el-select placeholder="选择对象字段">
                                                <el-option></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <div class="el-form-item content">
                                        <label class="el-form-item__label">数值范围1：</label>
                                        <div class="el-form-item__content">
                                            <el-input></el-input>
                                            <span class="sep">至</span>
                                            <el-input></el-input>
                                            <!--  -->
                                            <span class="zz-btn_txt grey">
                                                <span class="el-icon-delete"></span>
                                                <span>删除坐标范围</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <!--  -->
                                <div class="zz-df zz-df-jc-c zz-mt20">
                                    <el-button type="primary" icon="el-icon-plus">新增饼状图</el-button>
                                </div>

                            </div>
                            
                        </div>
                    </div>
                    <!-- 右侧 -->
                    <div class="add-reportForm-content_right">
                        <!-- 表格报表 -->
                        <div 
                            v-show="reportType=='0'"
                            class="area">
                            <!-- 报表名称 -->
                            <div class="title">未命名报表0</div>
                            <!--  -->
                        </div>
                        <!-- 折线图报表 -->
                        <div
                            v-show="reportType=='1'" 
                            class="area">
                            <!-- 报表名称 -->
                            <!-- <div class="title">未命名报表1</div> -->
                            <!-- 图表 -->
                            <div class="echarts-dom" :id="reports['1'].id">1</div>
                        </div>
                        <!-- 柱状图报表 -->
                        <div 
                            v-show="reportType=='2'"
                            class="area">
                            <!-- 报表名称 -->
                            <!-- <div class="title">未命名报表2</div> -->
                            <!-- 图表 -->
                            <div class="echarts-dom" :id="reports['2'].id">1</div>
                        </div>
                        <!-- 饼状图报表 -->
                        <div 
                            v-show="reportType=='3'"
                            class="area">
                            <!-- 报表名称 -->
                            <div class="title">未命名报表3</div>
                        </div>
                    </div>
                </div>
                <!--  -->
            </div>


        </div>


    </div>


    <!-- script begin -->
    <script src="../../js/jquery/jquery-3.2.1.min.js"></script>
    <script src="../../js/jquery/jquery.cookie.js"></script>
    <script src="../../js/underscore/underscore-min.js"></script>
    <script src="../../js/vue/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../js/vue/components/zzTag/zzTag.js"></script>
    <script src="../../js/vue/mixins/basicInfo.js"></script>
    <script src="../../js/vue/mixins/zzSetRem.js"></script>
    <!-- eacharts begin -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
    <!-- eacharts end -->
    <!--  -->
    <!-- <script src="../../js/vue/mixins/list.js"></script> -->
    <script src="../../js/zz/echarts_dom/calcDom.js"></script>
    <script src="../../js/vue/mixins/addReportForm/tableRf.js"></script>
    <script src="../../js/vue/mixins/addReportForm/zxtRf.js"></script>
    <script src="../../js/vue/mixins/addReportForm/zztRf.js"></script>
    <script src="../../js/vue/mixins/addReportForm/bztRf.js"></script>
    <script src="../../js/axios/axios.min.js"></script>
    <script src="../../js/zz/tool/tool.js"></script>
    <script src="../../js/zz/time/time.js"></script>
    <script src="../../js/zz/request/index.js"></script>
    <script src="../../js/zz/add_reportForm/index.js"></script>
    <!-- script end -->
</body>

</html>